<template>
  <div class="cable-line-distribution-page">
    <div class="search-filter-area">
      <h3>选择和查询区域</h3>
      <div class="filter-controls">
        <input type="text" v-model="searchLineName" placeholder="请输入线路名称" class="search-input">
        <button class="search-button" @click="applySearch">查询</button>
      </div>
    </div>
    <div class="table-area">
      <el-table :data="paginatedLineData" border style="width: 100%" :row-class-name="setRowClassName">
        <el-table-column prop="lineName" label="线路名称" width="180"/>
        <el-table-column prop="segmentCount" label="测试电缆段数量" width="150">
          <template #default="{ row }">
            <el-button type="link" @click="viewSegments(row)"
                       :class="{ 'active-menu': currentMenu === row.lineName }">{{ row.segmentCount }}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column prop="riskScore" label="风险评分" width="120"/>
        <el-table-column prop="riskLevelDistribution" label="风险等级分布"/>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <button @click="showImage(row)">查看图片</button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination" style="margin-top: 10px;">
        <el-pagination background layout="prev, pager, next" :total="filteredLineData.length"
                       :page-size="pageSize" @current-change="handlePageChange"/>
      </div>
    </div>
  </div>
  <el-dialog v-model="segmentDialogVisible" title="电缆段详情" width="50%" append-to-body>
    <div>
      <h4>线路名称: {{ segmentDetails.lineName }}</h4>
      <p>电缆段数量: {{ segmentDetails.segmentCount }}</p>
      <p>风险评分: {{ segmentDetails.riskScore }}</p>
      <p>风险等级分布: {{ segmentDetails.riskLevelDistribution }}</p>
    </div>
  </el-dialog>
  <!-- 图片展示对话框 -->
  <el-dialog v-model="dialogVisible" title="线路图片" width="50%" append-to-body>
    <img :src="currentImageUrl" alt="线路图片" style="max-width: 100%; height: auto;"/>
  </el-dialog>
</template>


<script setup>
import {ref, computed} from 'vue';
import {ElTable, ElTableColumn, ElPagination, ElButton} from 'element-plus';
import 'element-plus/dist/index.css';
import {useRouter} from 'vue-router';
import {ElDialog} from 'element-plus';

const router = useRouter();

const dialogVisible = ref(false);
const currentImageUrl = ref('');

const showImage = (row) => {
  currentImageUrl.value = '/pictures/xianlu1.png'; // Placeholder image
  dialogVisible.value = true;
};

// 根据风险评分设置行类名
const setRowClassName = ({row, rowIndex}) => {
  if (row.riskScore >= 80) {
    return 'high-risk-row';
  } else if (row.riskScore >= 60) {
    return 'medium-risk-row';
  } else {
    return 'low-risk-row';
  }
};

// 示例数据，需要替换为实际从后端获取的数据
const lineData = ref([
  {
    id: 1,
    lineName: '10kV果园线',
    segmentCount: 3,
    riskScore: 96,
    riskLevelDistribution: '高风险: 2, 中风险: 1, 低风险: 0'
  },
  {
    id: 2,
    lineName: '10kV红氢线',
    segmentCount: 5,
    riskScore: 87,
    riskLevelDistribution: '高风险: 3, 中风险: 2, 低风险: 0'
  },
  {
    id: 3,
    lineName: '10kV金湖线',
    segmentCount: 2,
    riskScore: 84,
    riskLevelDistribution: '高风险: 1, 中风险: 1, 低风险: 0'
  },
  {
    id: 4,
    lineName: '10kV华城线',
    segmentCount: 4,
    riskScore: 75,
    riskLevelDistribution: '高风险: 0, 中风险: 3, 低风险: 1'
  },
  {
    id: 5,
    lineName: '10kV富桥线',
    segmentCount: 6,
    riskScore: 68,
    riskLevelDistribution: '高风险: 0, 中风险: 2, 低风险: 4'
  },
  {
    id: 6,
    lineName: '10kV向东1回',
    segmentCount: 3,
    riskScore: 55,
    riskLevelDistribution: '高风险: 0, 中风险: 0, 低风险: 3'
  },
]);

const searchLineName = ref('');
const pageSize = ref(10);
const currentPage = ref(1);
const currentMenu = ref('');

const filteredLineData = computed(() => {
  if (!searchLineName.value) {
    return lineData.value;
  }
  const searchTerm = searchLineName.value.toLowerCase();
  return lineData.value.filter(line =>
      line.lineName.toLowerCase().includes(searchTerm)
  );
});

const paginatedLineData = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  const end = start + pageSize.value;
  return filteredLineData.value.slice(start, end);
});

const applySearch = () => {
  // Filtering is reactive via computed property, but we can reset page on search
  currentPage.value = 1;
};

const handlePageChange = (page) => {
  currentPage.value = page;
};

const segmentDialogVisible = ref(false);
const segmentDetails = ref({});

const viewSegments = (row) => {
  console.log('Viewing segments for line:', row);
  segmentDetails.value = row;
  segmentDialogVisible.value = true;
  currentMenu.value = row.lineName;
  //router.push({ name: 'CableSegmentDistribution', query: { lineName: row.lineName } });
};

</script>


<style scoped>
/* 不同风险等级的行样式 */
.el-table .high-risk-row {
  background-color: #fde0dc !important;
  /* 浅红色背景 */
}

.el-table .medium-risk-row {
  background-color: #fffbe0 !important;
  /* 浅黄色背景 */
}

.el-table .low-risk-row {
  background-color: #e8f5e9 !important;
  /* 浅绿色背景 */
}

.cable-line-distribution-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  background-color: #f0f2f5;
}

.search-filter-area {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-filter-area h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.filter-controls {
  display: flex;
  gap: 15px;
  /* Increased gap for better spacing */
  align-items: center;
}

.search-input {
  padding: 8px 12px;
  /* Adjusted padding */
  border: 1px solid #00914D !important;
  border-radius: 4px;
  flex-grow: 1;
  font-size: 14px;
  /* Added font size */
}

.search-button {
  padding: 8px 20px;
  /* Adjusted padding */
  background-color: #00914D;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  /* Added font size */
  transition: background-color 0.3s ease;
  /* Added transition */
}

.search-button:hover {
  background-color: #007a3d;
  /* Darker shade on hover */
}

.table-area {
  flex-grow: 1;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Style for Element Plus table header */
.el-table .el-table__header-wrapper th {
  background-color: #e8f5e9 !important;
  /* Light green background */
  color: #333 !important;
  /* Darker text color */
  font-weight: bold !important;
}

/* Style for alternating table rows */
.el-table__row:nth-child(even) {
  background-color: #f9f9f9;
  /* Light grey for even rows */
}

.el-table__row:nth-child(odd) {
  background-color: #ffffff;
  /* White for odd rows */
}

/* Style for the clickable segment count */
.el-table__column:nth-child(2) .el-button--text {
  color: #409eff;
  /* Element Plus primary blue color */
  text-decoration: underline;
}

.el-table {
  flex-grow: 1;
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.el-dialog {
  z-index: 2000 !important;
}

/* 不同风险等级的行样式 */
.el-table .high-risk-row {
  background-color: #fde0dc !important;
  /* 浅红色背景 */
}

.el-table .medium-risk-row {
  background-color: #fffbe0 !important;
  /* 浅黄色背景 */
}

.el-table .low-risk-row {
  background-color: #e8f5e9 !important;
  /* 浅绿色背景 */
}

.cable-line-distribution-page {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px;
  background-color: #f0f2f5;
}

.search-filter-area {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.search-filter-area h3 {
  margin-top: 0;
  color: #333;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

.filter-controls {
  display: flex;
  gap: 15px;
  /* Increased gap for better spacing */
  align-items: center;
}

.search-input {
  padding: 8px 12px;
  /* Adjusted padding */
  border: 1px solid #00914D !important;
  border-radius: 4px;
  flex-grow: 1;
  font-size: 14px;
  /* Added font size */
}

.search-button {
  padding: 8px 20px;
  /* Adjusted padding */
  background-color: #00914D;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  /* Added font size */
  transition: background-color 0.3s ease;
  /* Added transition */
}

.search-button:hover {
  background-color: #007a3d;
  /* Darker shade on hover */
}

.table-area {
  flex-grow: 1;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Style for Element Plus table header */
.el-table .el-table__header-wrapper th {
  background-color: #e8f5e9 !important;
  /* Light green background */
  color: #333 !important;
  /* Darker text color */
  font-weight: bold !important;
}

/* Style for alternating table rows */
.el-table__row:nth-child(even) {
  background-color: #f9f9f9;
  /* Light grey for even rows */
}

.el-table__row:nth-child(odd) {
  background-color: #ffffff;
  /* White for odd rows */
}

/* Style for the clickable segment count */
.el-table__column:nth-child(2) .el-button--text {
  color: #409eff;
  /* Element Plus primary blue color */
  text-decoration: underline;
}

.el-table {
  flex-grow: 1;
}

.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.el-dialog {
  z-index: 2000 !important;
}

.active-menu {
  background-color: #007a3d !important;
  /* 深色背景 */
}
</style>
